<template>
  <div class="card">
    <div id="root">
      <p class="head">怪物特征</p>
      <div class="item">
        <span class="item-key">咆哮</span><span class="item-val"><badge :num="info.sound" v-if="info.sound"/></span>
      </div>
      <div class="item">
        <span class="item-key">风压</span><span class="item-val"><badge :num="info.wind" v-if="info.wind"/></span>
      </div>
      <div class="item">
        <span class="item-key">震动</span><span class="item-val"><badge :num="info.shock" v-if="info.shock"/></span>
      </div>
      <div class="item">
        <span class="item-key">束缚</span><span class="item-val"><badge :num="info.limit" v-if="info.limit"/></span>
      </div>
      <div class="item">
        <span class="item-key">怪物属性</span><span class="item-val"><badge :num="info.attr" v-if="info.attr"/></span>
      </div>
      <div class="item">
        <span class="item-key">异常状态</span><span class="item-val"><badge :num="info.sp" v-if="info.sp"/></span>
      </div>
    </div>
  </div>
</template>
<script>
import badge from '@/components/Badge'
export default {
  data () {
    return {
      info: {}
    }
  },
  components: {
    badge
  },
  props: [
    'baseInfo'
  ],
  watch: {
    baseInfo (val) {
      this.info = val
    }
  }
}
</script>

<style scoped>
  #root{
    box-sizing: border-box;
    border-top: 1rpx solid #eeeeee;
  }
  .head{
    color: #212121;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
    margin-top: 10px;
  }

  .item-key{
    display: inline-block;
    width: 50%;
    text-align: left;
    color: #757575;
  }
  .item-val{
    display: inline-block;
    width: 50%;
    color: #212121;
    text-align: right;
  }
  .item{
    font-size: 14px;
    margin-bottom: 4px;
  }

</style>
